<template>
  <div class="apply">
    <a-row :gutter="10">
      <a-col :xl="24" :lg="24" :md="24">
        <a-card>
          <div>
            <a-tabs class="details-tabs" v-model:activeKey="activeKey" tab-position="left" @change="tabsChange">
              <a-tab-pane key="1" tab="基本信息">
                <a-form-model ref="formCodition" :label-col="{ span: 4, style: 'width:240px;' }"
                  :wrapper-col="{ span: 14, style: 'width:calc(100% - 240px)' }" class="modal-details"
                  :model="dialog.form">
                  <a-row :gutter="[48, 0]">
                    <div :style="'width:' + (dialogWidth ? 100 : 75) + '%;margin: 0 auto'">
                      <a-col :xl="24" :lg="24" :md="24">
                        <div class="dialog-subtitle">
                          <div class="subtitle">基本信息</div>
                        </div>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="市场信息分类" prop="infoType">
                          {{ dialog.form.infoType || '' }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="客户名称" prop="customName">
                          {{ dialog.form.customName }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="标题或关键词" prop="infoTitle">
                          {{ dialog.form.infoTitle }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="24" :lg="24" :md="24">
                        <a-form-model-item label="信息相关区域" prop="infoAreaName">
                          {{ dialog.form.infoAreaName || '' }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="信息上报人员" prop="reporterName">
                          {{ dialog.form.reporterName }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="信息上报单位" prop="reporteCompanyName">
                          {{
                            dialog.form.reporteCompanyName
                          }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="信息获取日期" prop="infoDate">
                          {{ dialog.form.infoDate }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="信息来源" prop="infoSource">
                          {{ dialog.form.infoSource }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="客户或中间人的联系方式" prop="infoContact">
                          {{ dialog.form.infoContact }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="信息初筛结果" prop="infoStatusName">
                          {{ dialog.form.infoStatusName }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="12" :lg="24" :md="24">
                        <a-form-model-item label="跟踪状态" prop="followStatusName">
                          {{ dialog.form.followStatusName }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="24" :lg="24" :md="24">
                        <a-form-model-item label="市场信息内容" prop="infoDesc">
                          {{ dialog.form.infoDesc || '' }}
                        </a-form-model-item>
                      </a-col>
                      <a-col :xl="24" :lg="24" :md="24" :style="'height:' + height + 'px'">
                        <a-form-model-item label="附件" prop="accessoryList">
                          <fileUpload ref="fileUpload" :disabled="true" />
                          <span v-if="!dialog.form.accessoryList || !dialog.form.accessoryList.length">暂无附件</span>
                        </a-form-model-item>
                      </a-col>
                    </div>
                  </a-row>
                </a-form-model>
              </a-tab-pane>
              <a-tab-pane key="2" tab="审批记录">
                <approveHistory ref="approveHistory" />
              </a-tab-pane>
            </a-tabs>
            <div class="table-page-search-wrapper">
              <a-form-model v-if="!identification" validateOnRuleChange ref="form" :rules="dialog.rules"
                :model="dialog.form" :label-col="{ span: 4, style: 'width:160px;' }"
                :wrapper-col="{ span: 14, style: 'width:calc(100% - 160px)' }">
                <a-row :gutter="10">
                  <a-col :xl="24" :lg="24" :md="24">
                    <a-form-model-item label="审批意见" prop="reason2">
                      <a-textarea :auto-size="{ minRows: 2, maxRows: 2 }" v-model="dialog.form.reason2"
                        placeholder="请输入审批意见" allowClear />
                    </a-form-model-item>
                  </a-col>
                  <a-col :xl="24" :lg="24" :md="24" style="display: flex; justify-content: center">
                    <span v-if="!identification">
                      <a-button class="pass" @click="allEvents('pass')">通过</a-button>
                      <a-button type="danger" style="margin-left: 8px" @click="allEvents('reject')">驳回</a-button>
                    </span>
                  </a-col>
                </a-row>
              </a-form-model>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
  import {
    marketInfoDetail,
    marketInfoAudit,
  } from '@/api/marketManagement/marketInfo/marketInfo'
  import approveHistory from './approveHistory.vue'

  export default {
    name: 'marketInfoDetails',
    components: {
      approveHistory,
    },
    props: {
      identification: {
        type: Boolean,
      },
      //是否为弹框引用
      dialogWidth: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        activeKey: '1',
        height: '',
        dialog: {
          show: false,
          form: {
            infoType: undefined,
            customName: undefined,
            infoTitle: undefined,
            infoArea: undefined,
            reporteCompany: undefined,
            infoDate: this.dateFormatter(new Date(), true),
            infoSource: undefined,
            infoContact: undefined,
            infoStatus: undefined,
            followStatus: undefined,
            infoDesc: undefined,
            fileIds: [],
          },
          rules: {
            reason2: [{
              required: true,
              message: '请输入审批意见',
              trigger: 'blur',
            }, ],
          },
        },
      }
    },
    mounted() {},
    created() {
      this.getTree()
    },
    methods: {
      tabsChange(activeKey) {
        if (activeKey == 1) {
          this.init(this.id)
        } else if (activeKey == 2) {
          this.$nextTick(function () {
            this.$refs.approveHistory &&
              this.$refs.approveHistory.init({
                  id: this.id,
                },
                '1'
              )
          })
        }
      },
      init(id) {
        this.activeKey = '1'
        this.id = id
        marketInfoDetail({
          id: id,
        }).then((res) => {
          res.accessoryList && this.$refs.fileUpload.inits(res.accessoryList)
          if (res.accessoryList && res.accessoryList.length) {
            this.height = 62 + (res.accessoryList.length - 1) * 30
          } else {
            this.height = 62
          }
          this.dialog.form = res
        })
      },

      // 附件上传
      fileUpload(fileList, ids) {
        this.dialog.form.fileIdList = ids
      },

      allEvents(type, param, param1) {
        switch (type) {
          case 'click':
            this.dialog.show = true
            break
          case 'cancel':
            this.$refs.formCodition.resetFields()
            this.dialog.form.planCostInfo = []
            this.dialog.form.reason2 = undefined
            this.$refs.fileUpload.clears()
            break
            /**
             * 通过
             */
          case 'pass':
            this.$refs.form.validate((valid) => {
              if (valid) {
                var that = this
                this.$confirm({
                  title: '确定要通过该条审批吗?',
                  okText: '确定',
                  okType: 'danger',
                  cancelText: '取消',
                  onOk() {
                    marketInfoAudit({
                      dataId: that.dialog.form.id,
                      auditType: '1',
                      auditStatus: 1,
                      reason: that.dialog.form.reason2,
                    }).then((res) => {
                      that.$message.success('通过成功')
                      that.allEvents('cancel')
                      that.$emit('reset')
                    })
                  },
                  onCancel() {},
                })
              }
            })

            break
            /**
             * 驳回
             */
          case 'reject':
            this.$refs.form.validate((valid) => {
              if (valid) {
                var that = this
                this.$confirm({
                  title: '确定要驳回该条审批吗?',
                  okText: '确定',
                  okType: 'danger',
                  cancelText: '取消',
                  onOk() {
                    marketInfoAudit({
                      dataId: that.dialog.form.id,
                      auditType: '1',
                      auditStatus: 2,
                      reason: that.dialog.form.reason2,
                    }).then((res) => {
                      that.$message.success('驳回成功')
                      that.$emit('reset')
                      that.allEvents('cancel')
                    })
                  },
                  onCancel() {},
                })
              }
            })
            break
        }
      },

      getTree() {},
    },
  }
</script>

<style lang="less" scoped>
</style>